<template>
  <a-popover>
    <div class="user-info">
      <img class="user-info__avatar" src="" alt="" />
      <p class="user-info__username">{{ userInfo.nickname || '--' }}</p>
    </div>
    <template #content>
      <a-menu @click="clickMenu">
        <a-menu-item key="user-center" title="个人中心">个人中心</a-menu-item>
        <a-menu-item key="log-out" title="退出登录">退出登录</a-menu-item>
      </a-menu>
    </template>
  </a-popover>
</template>

<script setup lang="ts">
import { logOut } from '@/utils/request';
import { Modal } from 'ant-design-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
interface IProps {
  userInfo: any;
}

defineProps<IProps>();

const showLogoutModal = ref<boolean>(false);

const clickMenu = (path: { key: any }) => {
  console.log(path);
  const { key } = path;
  if (key === 'log-out') {
    Modal.confirm({
      title: '提示',
      content: '是否确认退出登录?',
      onOk: () => {
        // TODO: 退出登录
        logOut();
      },
      cancelText: '再想一想',
      okText: '去意已决',
    });
    return;
  }
  router.push({
    path: `/${key}`,
  });
};
</script>

<style lang="less" scoped>
.user-info {
  display: flex;
  align-items: center;
}

.user-info__username {
  margin-bottom: 0;
}
</style>
